<!DOCTYPE html>
	<html>
		<head> <title> Sample </title>
		  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
			<meta charset="utf-8">
	<style>
       #map-canvas {
        height: 500px;
        margin: 0px auto;
        padding: 0px;
		width:50%;
      }
    </style>
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

		</head>
		<body>
			
			<div class='wrapper'>
				<div class='map' id='map-canvas'>
					
				</div>
				<br/>
				<br/>
				<?php echo form_open('map/search'); ?>
				SEARCH:<input type='text' name='projectsearch' /> <input type='submit' name='search' />
				<p class='alert-danger'>
					<?php if($rows == false){
						$rows = $this->project_m->display_all();
						echo "Sorry! Your Search ".$this->input->post('projectsearch')." did not much in any of our Documents!";
					}	
					?>
				</p>
				<?php echo form_close(); ?>
			
	
<script type='text/javascript'>

var map;
var zoomLimit = 1;
var cl_markers = [
	<?php foreach($rows as $data): ?>
	{
	company_name:"<?php echo $data->company_name; ?>",
    project_name: "<?php echo $data->project_name ?>",
    lat: <?php echo $data->lat ?>,
    lng:  <?php echo $data->lng ?>,
    address: "<?php echo $data->comp_address ?>",
	icon:"<?php echo site_url($data->project_icon); ?>",
	},
	<?php endforeach; ?>
];

function _newGoogleMapsMarker(param) {
    var r = new google.maps.Marker({
        map: param._map,
        position: new google.maps.LatLng(param._lat, param._lng),
        title: param._head,
		icon:param._icon
    });
    if (param._data) {
        google.maps.event.addListener(r, 'click', function() {
            // this -> the marker on which the onclick event is being attached
            if (!this.getMap()._infoWindow) {
                this.getMap()._infoWindow = new google.maps.InfoWindow();
            }
            this.getMap()._infoWindow.close();
            this.getMap()._infoWindow.setContent(param._data);
            this.getMap()._infoWindow.open(this.getMap(), this);
        });
    }
    return r;
}

function init() {
    var mO = {
        center: new google.maps.LatLng(0,0),
        zoom: zoomLimit,
        streetViewControl: true,
        mapTypeControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mO);
	
    for (var a = 0; a < cl_markers.length; a++) {
        
		var tmpLat = cl_markers[a].lat;
        var tmpLng = cl_markers[a].lng;
		var tmpCompName = cl_markers[a].company_name;
        var tmpName = cl_markers[a].project_name;
        var tmpAdr = cl_markers[a].address;
		var tmpIcon = cl_markers[a].icon;
        var marker = _newGoogleMapsMarker({
			_icon:tmpIcon,
            _map: map,
            _lat: tmpLat,
            _lng: tmpLng,
            _head: tmpName ,
            _data: '<div class="bg">\
			<h1 class="compname">' + tmpCompName + '</h1>\
			<h2 class="title">' + tmpName + '</h2>\
			<h3 class="address">' + tmpAdr + '</h3>\
        </div>'
        });
    } // end loop ..
}

window.onload = init;



</script>
			

	</div>
		</body>
	</html>